<template>
  <div class="chat" ref="faultTree" id="superMap">
  <el-container class="container">
    <el-aside class="aside" width="90px">
      <div class="aside-top">
        <i style="font-size: 28px" class="el-icon-s-grid"></i>
        <div>全部</div>
      </div>
      <div :class="index === badgeCheck ? 'aside-item active' : 'aside-item'" v-for="(item,index) in badgeList" :key="index" @click="check(index)">
        <el-badge :hidden="item.value === 0" :value="item.value" :max="99" class="item">
          <el-image style="width: 42px; height: 42px" :src="item.src" fit="fill"></el-image>
          <div :class="item.online ? 'dot online' : 'dot'"/>
        </el-badge>
      </div>
    </el-aside>
    <el-main style="min-width: 1200px">
      <el-row>
        <el-col :span="4" class="communication">
          <div class="comm_top">
            <el-input size="mini" placeholder="搜索客户信息及亲友关系" v-model="inputSerch">
              <el-button slot="append" icon="el-icon-search"></el-button>
            </el-input>
            <div class="comm_tit">
              <div :class="titIndex===0 ? 'active' : ''" @click="checkTit(0)">会话</div>
              <div :class="titIndex===1 ? 'active' : ''" @click="checkTit(1)">通讯录</div>
            </div>
          </div>
          <div class="comm_main">
            <div v-if="titIndex===0">
              <div v-for="(item, index) in dialogue" :key="index" class="comm_person">
                <div class="icon">
                  <el-image style="width: 50px; height: 50px" :src="item.icon"></el-image>
                </div>
                <div class="comm_message">
                  <div>
                    <div class="mess_tit">{{ item.title }}</div>
                    <div class="mess_mes">{{ item.message }}</div>
                  </div>
                  <div style="text-align: right">
                    <div style="margin-bottom: 5px;">{{ item.time }}</div>
                    <div v-show="item.showMess"><i class="el-icon-turn-off-microphone"></i></div>
                    <div v-show="!item.showMess" style="opacity: 0;"><i class="el-icon-microphone"></i></div>
                  </div>
                </div>
              </div>
            </div>
            <div class="addBook" v-if="titIndex===1">
              <!-- 匹配前开始 -->
              <div>
                <div v-for="(a, b, index) in datalist.userList" :id="b" :key="index">
                <div class="address_title" v-if="a.length != 0">
                  {{ b }}
                </div>
                <div ref="orderview">
                  <div v-for="(c, i) in a" :key="i">
                    <div class="address_text" :key="c.id">
                      <div class="address_img_div">
                        <el-image style="width: 42px; height: 42px" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg" fit="fill"></el-image>
                      </div>
                      <div class="name_b">
                        <div>{{ c.name }}</div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              </div>
              <!-- 侧边栏开始 -->
              <div class="address_ce">
                <div v-for="(a, b, index) in datalist.userList" :key="index"  @click="scrollTopClick(b, index)" :class="{ 'active': index === curindex }" :id="'str' + b">
                  <div class="address_le">{{ b }}</div>
                </div>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="14">
          <div class="chat_main">
            <div class="chat_top">
              <div class="chat_name">
                <span class="name">张三</span>
                <span class="show_hin"><i class="el-icon-chat-dot-square" style="margin-right: 4px; color: #4d88f7"></i>李四回复中</span>
              </div>
              <div class="chat_rem">
                <span>微信备注:</span>
                <el-input
                  v-if="showRem"
                  style="width: 20%"
                  size="mini"
                  placeholder="请输入内容"
                  v-model="wx_rem"
                  @blur="showRem = false">
                </el-input>
                <div v-if="!showRem">张三<i class="el-icon-edit" style="margin-left:8px" @click="editRem(0)"></i></div>
                <el-divider direction="vertical"></el-divider>
                <span>客户姓名:</span>
                <el-input
                  v-if="showName"
                  style="width: 20%"
                  size="mini"
                  placeholder="请输入内容"
                  v-model="wx_name"
                  @blur="showName = false">
                </el-input>
                <div v-if="!showName">Zhangsan<i class="el-icon-edit" style="margin-left:8px" @click="editRem(1)"></i></div>
              </div>
            </div>
            <div class="chat_center">
              <el-image v-if="url" style="width: 200px; height: 200px;" :src="url" :preview-src-list="srcList" fit="fill"></el-image>
              <div v-html="renderTextMessage(emoj)"></div>
            </div>
            <div class="line"></div>
            <div class="chart_bottom">
              <div class="chart_icon">
                <el-popover
                  placement="top-start"
                  width="800"
                  trigger="click"
                  v-model="visible">
                  <div class="action-bottom" style="flex-wrap: wrap;overflow: auto">
                    <el-image class="emoji-item" v-for="(emojiItem, emojiKey, index) in emoji.map" :key="index" :src="emoji.url + emojiItem" @click="selectEmoji(emojiKey)"/>
                  </div>
                  <el-image slot="reference" style="width: 21px; height: 21px;margin-right: 20px" src="../../../static/img/face.png" fit="fill"></el-image>
                </el-popover>
                <el-image style="width: 21px; height: 21px;margin-right: 20px" src="../../../static/img/wj.png" fit="fill"></el-image>
                <el-image @click="screenshot" style="width: 20px; height: 20px" src="../../../static/img/jt.png" fit="fill"></el-image>
              </div>
              <div>
                <el-input
                  type="textarea"
                  placeholder="请输入内容"
                  v-model="textarea"
                  resize="none"
                  :autosize="{ minRows: 4, maxRows: 4}"
                >
                </el-input>
              </div>
              <div class="btn_bot">
                <div>按下Shift+Enter键换行</div>
                <el-button size="mini" type="primary">发送</el-button>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="5">
          <div class="userData">
            <div class="user_top">客户资料</div>
            <div>
              <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
                <el-tab-pane label="客户" name="first">
                  <div class="user_main">
                    <el-form size="mini" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                      <el-form-item label="客户姓名:" prop="name">
                        <el-input v-model="ruleForm.name"></el-input>
                      </el-form-item>
                      <el-form-item label="个性称呼:">
                        <el-input v-model="ruleForm.nikName"></el-input>
                      </el-form-item>
                      <el-form-item label="性别:">
                        <el-select v-model="ruleForm.region">
                          <el-option label="未知" value="-1"></el-option>
                          <el-option label="男" value="1"></el-option>
                          <el-option label="女" value="0"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="联系方式:">
                        <el-input v-model="ruleForm.contactWay"></el-input>
                      </el-form-item>
                      <el-form-item label="病历号:">
                        <el-input v-model="ruleForm.medicalNo"></el-input>
                      </el-form-item>
                      <el-form-item label="出生日期">
                        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date" style="width: 100%;"></el-date-picker>
                      </el-form-item>
                      <el-form-item label="固定电话:">
                        <el-input v-model="ruleForm.tell"></el-input>
                      </el-form-item>
                      <el-form-item label="Email:">
                        <el-input v-model="ruleForm.email"></el-input>
                      </el-form-item>
                      <el-form-item label="标签:">
                        <el-input v-model="ruleForm.tag"></el-input>
                      </el-form-item>
                      <el-form-item label="家庭决策人:">
                        <el-select v-model="ruleForm.decision">
                          <el-option label="否" value="-1"></el-option>
                          <el-option label="父亲" value="1"></el-option>
                          <el-option label="母亲" value="2"></el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="客户类型:">
                        <el-select disabled v-model="ruleForm.usertype" multiple>
                          <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item label="线上来源:">
                        <el-select disabled v-model="ruleForm.source" multiple>
                          <el-option
                            v-for="item in options2"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                      </el-form-item>
                      <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                        <el-button @click="resetForm('ruleForm')">重置</el-button>
                      </el-form-item>
                    </el-form>
                  </div>
                </el-tab-pane>
                <el-tab-pane label="会员信息" name="second">会员信息</el-tab-pane>
                <el-tab-pane label="亲友" name="third">亲友</el-tab-pane>
                <el-tab-pane label="其他" name="fourth">其他</el-tab-pane>
              </el-tabs>
            </div>
          </div>
        </el-col>
        <el-col :span="1" style="text-align: center;background-color: #fff">
          <div v-for="(item, index) in imgList.img" :key="index" @click="checkImg(index)">
            <div :class="imgIndex === index ? 'rightImg active' : 'rightImg'">
              <el-image v-show="imgIndex !== index" style="width: 21px; height: 21px;" :src="item" fit="fill"></el-image>
              <el-image v-show="imgIndex === index" style="width: 21px; height: 21px;" :src="imgList.img_active[index]" fit="fill"></el-image>
            </div>
          </div>
        </el-col>
      </el-row>
    </el-main>
  </el-container>
  </div>
</template>

<script>
import html2canvas from 'html2canvas'
import EmojiDecoder from '../../components/emoji/EmojiDecoder'
export default {
  name: 'index',
  data () {
    let emojiUrl = 'https://imgcache.qq.com/open/qcloud/tim/assets/emoji/'
    let emojiMap = {
      '[ok]': 'emoji_1@2x.png',
      '[么么哒]': 'emoji_3@2x.png',
      '[乒乓]': 'emoji_4@2x.png',
      '[便便]': 'emoji_5@2x.png',
      '[信封]': 'emoji_6@2x.png',
      '[偷笑]': 'emoji_7@2x.png',
      '[傲慢]': 'emoji_8@2x.png',
      '[再见]': 'emoji_9@2x.png',
      '[流汗]': 'emoji_10@2x.png',
      '[凋谢]': 'emoji_11@2x.png',
      '[勾引]': 'emoji_14@2x.png',
      '[鼻涕]': 'emoji_15@2x.png',
      '[发抖]': 'emoji_16@2x.png',
      '[可怜]': 'emoji_17@2x.png',
      '[愉快]': 'emoji_18@2x.png',
      '[右哼哼]': 'emoji_19@2x.png',
      '[转圈]': 'emoji_20@2x.png',
      '[吐]': 'emoji_22@2x.png',
      '[咒骂]': 'emoji_24@2x.png',
      '[咖啡]': 'emoji_25@2x.png',
      '[啤酒]': 'emoji_26@2x.png',
      '[嘘]': 'emoji_27@2x.png'
    }
    return {
      badgeCheck: 0, // 左侧选中
      badgeList: [
        {
          value: 100,
          src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          online: true
        },
        {
          value: 10,
          src: 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
          online: false
        },
        {
          value: 0,
          src: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
          online: true
        }
      ], // 群和组列表
      inputSerch: '', // 搜索框
      titIndex: 0, // 选中会话
      dialogue: [
        {
          icon: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
          title: '圆和医疗-北极熊聊天群',
          message: '[系统消息]你撤回了一条信息',
          time: '11:45',
          showMess: true
        },
        {
          icon: 'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
          title: '圆和内镜一家人',
          message: '张三: 客户一直在打电话',
          time: '11:39',
          showMess: true
        },
        {
          icon: 'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
          title: '王丽丽',
          message: '好的',
          time: '11:00',
          showMess: false
        }
      ], // 会话列表
      // 通讯录
      curindex: '',
      datalist: {
        userList: {
          'A': [],
          'B': [],
          'C': [
            { name: '崔崔', tel: '151511515156', id: 23 },
            { name: '菜坤', tel: '151511515156', id: 24 },
            { name: '崔崔', tel: '151511515156', id: 35 },
            { name: '菜坤', tel: '151511515156', id: 36 },
            { name: '崔崔', tel: '151511515156', id: 37 },
            { name: '菜坤', tel: '151511515156', id: 38 },
            { name: '崔崔', tel: '151511515156', id: 39 },
            { name: '菜坤', tel: '151511515156', id: 40 },
            { name: '崔崔', tel: '151511515156', id: 41 },
            { name: '菜坤', tel: '151511515156', id: 42 },
            { name: '崔崔', tel: '151511515156', id: 43 },
            { name: '菜坤', tel: '151511515156', id: 44 },
            { name: '崔崔', tel: '151511515156', id: 45 }
          ],
          'D': [
            { name: '邓星', tel: '151511515156', id: 25 },
            { name: '邓富强', tel: '151511515156', id: 26 },
            { name: '戴吉科', tel: '151511515156', id: 28 },
            { name: '邓星', tel: '151511515156', id: 46 },
            { name: '邓富强', tel: '151511515156', id: 47 },
            { name: '戴吉科', tel: '151511515156', id: 48 },
            { name: '邓星', tel: '151511515156', id: 49 },
            { name: '邓富强', tel: '151511515156', id: 50 },
            { name: '戴吉科', tel: '151511515156', id: 51 },
            { name: '邓星', tel: '151511515156', id: 52 },
            { name: '邓富强', tel: '151511515156', id: 53 },
            { name: '戴吉科', tel: '151511515156', id: 54 },
            { name: '邓星', tel: '151511515156', id: 55 },
            { name: '邓富强', tel: '151511515156', id: 56 },
            { name: '戴吉科', tel: '151511515156', id: 57 }
          ],
          'E': [],
          'F': [{ name: '付强', tel: '212121121', id: 27 }],
          'G': [],
          'H': [
            { name: '黄华', tel: '2323232323111', id: 30 },
            { name: '黄宝宝', tel: '2323232323111', id: 31 },
            { name: '黄礼侠', tel: '2323232323111', id: 32 }
          ],
          'I': [],
          'J': [],
          'K': [],
          'L': [],
          'M': [],
          'N': [],
          'O': [],
          'P': [],
          'Q': [],
          'R': [],
          'S': [],
          'T': [],
          'U': [],
          'V': [],
          'W': [],
          'X': [
            { name: '徐昌胜', tel: '232323243564656', id: 33 },
            { name: '笑笑', tel: '23546567678789', id: 34 }
          ],
          'Y': [],
          'Z': []
        }
      },
      // 聊天主题部分
      wx_rem: '', // 微信备注
      wx_name: '', // 客户姓名
      showRem: false, // 显示备注输入框
      showName: false, // 显示客户名称输入框
      textarea: '',
      visible: false,
      // 客户资料
      activeName: 'first',
      ruleForm: {
        name: '', // 客户姓名
        nikName: '', // 个性称呼
        sex: '-1', // 性别
        contactWay: '', // 联系方式
        medicalNo: '', // 病历号
        date: '', // 出生日期
        tell: '', // 固定电话
        email: '', // Email
        tag: '', // 标签
        decision: '-1', // 家庭决策人
        usertype: ['1'], // 客户类型
        source: ['1'] // 线上来源
      },
      rules: {
        name: [
          { required: true, message: '请输入客户姓名', trigger: 'blur' }
        ]
      },
      options: [{
        value: '1',
        label: '普通'
      }],
      options2: [{
        value: '1',
        label: '个人微信'
      }],
      imgList: {
        'img': ['../../../static/img/kh.png', '../../../static/img/xx2.png', '../../../static/img/sz.png', '../../../static/img/gx.png', '../../../static/img/zs.png', '../../../static/img/yh.png', '../../../static/img/xx.png', '../../../static/img/wj.png'],
        'img_active': ['../../../static/img/kh_active.png', '../../../static/img/xx2_active.png', '../../../static/img/sz_active.png', '../../../static/img/gx_active.png', '../../../static/img/zs_active.png', '../../../static/img/yh_active.png', '../../../static/img/xx_active.png', '../../../static/img/wj_active.png']
      },
      imgIndex: null,
      url: '', // 截图
      srcList: [],
      // 定义表情列表
      emoji: {
        url: emojiUrl,
        map: emojiMap,
        show: true,
        decoder: new EmojiDecoder(emojiUrl, emojiMap)
      },
      emoj: ''
    }
  },
  methods: {
    // 选中左侧
    check (index) {
      this.badgeCheck = index
    },
    // 选中会话
    checkTit (index) {
      this.titIndex = index
    },
    layOut () {
      this.$store.dispatch('LogOut').then(() => {
        location.reload() // 为了重新实例化vue-router对象 避免bug
      })
    },
    // 通讯录开始
    scrollTopClick (v, index) {
      this.curindex = index
      var des = document.querySelector('#' + v).offsetTop
      this.$refs.orderview.scrollTop = des
    },
    // 通讯录结束
    // 微信备注
    editRem (num) {
      if (num === 0) {
        this.showRem = true
      } else if (num === 1) {
        this.showName = true
      }
    },
    // 客户资料
    handleClick (tab, event) {
      console.log(tab, event)
    },
    submitForm (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm (formName) {
      this.$refs[formName].resetFields()
    },
    // 截图
    screenshot () {
      const ref = this.$refs.faultTree // 截图区域
      html2canvas(ref,
        {
          width: document.documentElement.clientWidth,
          height: document.documentElement.clientHeight,
          backgroundColor: null, // 设置背景为透明色
          useCORS: true, // 支持图片跨域
          scale: 1 // 设置放大的倍数
        }
      ).then(canvas => {
        const url = canvas.toDataURL('image/png') // 生成的图片
        console.log(url)
        this.url = url
        this.srcList.push(url)
      })
    },
    // 最右侧
    checkImg (index) {
      this.imgIndex = index
    },
    // 选表情
    selectEmoji (emojiKey) {
      console.log(emojiKey)
      this.emoj += emojiKey
      this.visible = false
    },
    renderTextMessage (message) {
      return '<span class="text-content">' + this.emoji.decoder.decode(message) + '</span>'
    }
  }
}
</script>

<style scoped>
.chat /deep/ .el-badge__content {
  border: none;
}
.chat /deep/ .el-main {
  padding: 0;
}
.container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.aside {
  background-color: #264259;
  color: #fff;
  text-align: center;
}
.aside::-webkit-scrollbar{
  display:none;
}
.aside-top {
  background-color: #264259;
  position: fixed;
  height: 70px;
  width: 90px;
  z-index: 99;
  padding: 11px;
  box-sizing: border-box;
}
.aside-item {
  height: 70px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
.aside-item.active {
  background-color: #0f283d;
}
.aside-item:nth-child(2) {
  margin-top: 70px;
}
.item {
  position: relative;
}
.dot {
  height: 10px;
  width: 10px;
  background-color: #8e8e8e;
  position: absolute;
  right: -5px;
  bottom: 0px;
  border-radius: 50%;
}
.dot.online {
  background-color: #09f175;
}

/* 通讯录 */
.communication {
  border-right: 2px solid #d9d9d9;
  height: 100vh;
  background-color: #f5f5f5;
  position: relative;
}
.comm_top {
  height: 80px;
  border-bottom: 1px solid #d9d9d9;
  padding: 10px 10px 0;
  box-sizing: border-box;
  background-color: #f5f5f5;
  position: absolute;
  left: 0px;
  width: 100%;
}
.comm_tit {
  display: flex;
  justify-content: space-around;
  margin-top: 10px;
  text-align: center;
  color: #95a3c3;
}
.comm_tit div {
  width: 50px;
  height: 22px;
  line-height: 22px;
  cursor: pointer;
}
.comm_tit div.active {
  border-bottom: 5px solid #3d7df6;
  color: #3d7df6;
}

/* 会话列表 */
.comm_main {
  height: calc(100vh - 80px);
  overflow: auto;
  margin-top: 80px;
  padding: 0 4px;
}
.comm_person {
  display: flex;
  height: 75px;
  border-bottom: 1px solid #ddd;
  cursor: pointer;
}
.icon {
  height: 75px;
  width: 50px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 6px;
}
.comm_message {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}
.mess_tit {
  max-width: 120px;
  width: 120px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 5px;
}
.mess_mes {
  max-width: 150px;
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #9b9b9b;
}

/* 通讯录 */
.address_title {
  background: #ededed;
  height: 30px;
  line-height: 30px;
  color: #676566;
  padding-left: 10px;
}
.address_text {
  display: flex;
  background-color: #fff;
  height: 50px;
  line-height: 50px;
  cursor: pointer;
}
.name_b {
  width: 100%;
  border-bottom: 1px solid #e6e6e6;
}
.address_img_div {
  padding: 4px 10px 0;
  box-sizing: border-box;
}
.addBook {
  position: relative;
}
.address_ce {
  position: fixed;
  left: 18%;
  margin: auto;
  top: 200px;
  font-size: 14px;
  width: 20px;
  text-align: center;
}
.address_le {
  margin-bottom: 2px;
  cursor: pointer;
}
.address_ce .active {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #06ca64;
  color: #fff;
  padding-top: 2px;
  box-sizing: border-box;
}

/* 聊天主体 */
.chat_main {
  border-right: 2px solid #d9d9d9;
  height: 100vh;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}
.chat_top {
  height: 80px;
  border-bottom: 1px solid #d9d9d9;
  padding: 0 20px;
  box-sizing: border-box;
  background-color: #fff;
  /* position: absolute; */
  left: 0px;
  width: 100%;
}
.chat_name {
  height: 45px;
  line-height: 45px;
}
.chat_name .name {
  font-weight: 800;
  margin-right: 10px;
}
.chat_name .show_hin {
  color: #44434a;
  font-size: 12px;
}
.chat_rem {
  display: flex;
  height: 30px;
  line-height: 30px;
}
.chat_rem span {
  color: #999999;
  font-size: 12px;
  margin-right: 10px;
}
.chat_rem div {
  color: #000;
  font-size: 14px;
}
.chat /deep/ .el-divider--vertical {
  margin: 8px;
}
.chat_center {
  height: 480px;
  overflow: auto;
  padding: 10px;
}
.line {
  height: 5px;
  background-color: #f5f5f5;
}
.chart_icon {
  padding: 10px 0 0 10px;
}
.chat /deep/ .el-textarea__inner {
  border: none;
}
.btn_bot {
  margin: 5px 10px 0;
  float: right;
  height: 30px;
  line-height: 30px;
  display: flex;
}
.btn_bot div {
  color: #999999;
  font-size: 14px;
  margin-right: 20px;
}
/* 客户资料 */
.userData {
  border-right: 2px solid #d9d9d9;
  height: 100vh;
  background-color: #fff;
  position: relative;
  overflow: hidden;
}
.user_top {
  height: 80px;
  border-bottom: 1px solid #d9d9d9;
  box-sizing: border-box;
  background-color: #fff;
  text-align: center;
  left: 0px;
  width: 100%;
  line-height: 80px;
  font-weight: 600;
}
/* .chat /deep/ .is-top {
  padding: 0 20px!important;
} */
.chat /deep/ .el-tabs--card>.el-tabs__header .el-tabs__nav {
  border: none;
}
.chat /deep/ .el-tabs--card>.el-tabs__header .el-tabs__item {
  border: none;
}
.chat /deep/ .el-tabs__item.is-active {
  border-bottom: 1px solid #409EFF!important;
}
.user_main {
  height: calc(100vh - 140px);
  overflow: auto;
  padding: 0 10px 0 0;
}
.rightImg {
  /* height: 40px; */
  padding: 20px 0;
}
.rightImg.active {
  background-color: #d3e0f7;
}
.emoji-item {
  height: 40px;
  width: 40px;
  cursor: pointer;
}
</style>
